<!--
    * Time    : 2021-03-11 13:43:17
    * Author  : zhangTj
    * Desc    : 地址组件
-->

<template>
    <div class="p-15p">
        <div class="font-14">
            <span class="text-danger" v-if="value.required">*</span>
            {{ index + 1 }}.{{ value.title }}
        </div>
        <div class="py-1">
            <div @click="showRegion = true" class="d-flex a-center bg-fff" style="height: 40px; padding: 0 17px">
                <span v-if="!value.regionName" class="flex-1 font-12" style="color: #c8c9cc">请选择</span>
                <span v-else class="flex-1 font-12">{{ value.regionName }}</span>
                <i class="iconfont iconArrowRight" style="font-size: 14px"></i>
            </div>
        </div>

        <addressSelect v-model="showRegion" @confirm="confirmAddress" :title="value.title" />
    </div>
</template>

<script>
import addressSelect from '@/components/addressSelect/addressSelect'
export default {
    name: 'Region',
    components: { addressSelect },
    props: {
        index: {
            type: Number | String,
            default: 0
        },
        value: Object
    },
    data() {
        return {
            showRegion: false
        }
    },
    methods: {
        confirmAddress(event) {
            this.value.content = event.keyId
            this.value.regionName = event.addressStr
        }
    }
}
</script>
